<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <title>P2P小贷</title>
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <!--<link rel="stylesheet" href="../css/style.css">-->
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        body{
            background-color: #008AC9;
        }
        #ec001{
            width: 100%;
            height: 30em;
        }
    </style>
</head>
<body>
<h3>33333333333333</h3>
<div id="ec001">

</div>
<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script>
    var bodyScale = 1;
    var axis_com = {
        axisLabel: { //标签名称
            color: '#fff',
            fontSize:11*bodyScale,
            fontFamily:'PingFang SC, microsoft yahei, sans-serif'
            // fontFamily:'微软雅黑, sans-serif'
        },
        nameTextStyle: { //坐标轴名称
            color: "#fff",
            fontSize:10*bodyScale
        },
        nameGap: 10*bodyScale, //坐标轴名称距离
        axisTick: { //小刻度线
            show: false
        },
        axisLine: { //坐标轴
            lineStyle: {
                color: "#369"
            }
        },
        splitLine:{ //分割线
            lineStyle:{
                color :"#369"
            }
        }
    };
    var opt_com = {
        color: [
            '#00adef',
            '#36cfc9',
            '#73d13d',
            '#597ef7',
            '#9254de',
            '#f759ab',
            '#ff4d4f',
            '#ffa940',
            '#ff7a45',
            '#ffc53d',
            '#bae637',
            '#ffec3d',
            '#91d5ff',
            '#87e8de',
            '#b7eb8f',
            '#adc6ff',
            '#d3adf7',
            '#ffadd2',
            '#ffa39e',
            '#ffd591',
            '#ffbb96',
            '#ffe58f',
            '#d3f261',
            '#fffb8f'
        ],
        legend: {
            textStyle: {
                fontSize:11*bodyScale,
                color: '#fff' //图例白色
            },
            itemWidth: 11*bodyScale,
            itemHeight: 11*bodyScale,
            top: '3%'
        },
        tooltip: {
            show: true, //显示提示
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'      // 默认为直线，可选为：'line' | 'shadow'
            }

        },
        grid: {
            bottom: "15%" //底边留空
        },
        // xAxis: axis_com,
        // yAxis: axis_com,
        series: [{
            type: 'line',
            symbol: 'circle'
        },{
            type: 'line',
            symbol: 'circle'
        }]
    };
    var opt_bar_vertical = $.extend({
        xAxis: $.extend({
            type: 'category'
        }, axis_com),
        yAxis:$.extend({
            type: 'value'
        }, axis_com)
    },opt_com);

    var ec001 = echarts.init($("#ec001")[0]);
    console.log(opt_bar_vertical)
        ec001.setOption(opt_bar_vertical);
        ec001.setOption({
            xAxis: {
                // type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                // type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }]
        })

    $("h3").click(function () {
        console.log(1);
        // ec001.clear();
        ec001.resize();
    })
</script>
</body>
</html>